<template>
  <div 
    class="photo-card" 
    :class="{ 'photo-card-selected': selected }"
    @click="handleClick"
    @contextmenu.prevent="handleContextMenu"
  >
    <div class="photo-thumbnail" :style="thumbnailStyle">
      <img 
        :src="thumbnailUrl" 
        :alt="photo.file_name"
        loading="lazy"
        @error="handleImageError"
      />
      
      <!-- 选择状态 -->
      <div v-if="selectable" class="photo-select" @click.stop="toggleSelect">
        <el-checkbox :model-value="selected" />
      </div>
      
      <!-- 悬停操作 -->
      <div class="photo-actions">
        <el-button 
          type="primary" 
          size="small" 
          circle
          @click.stop="openPhotoDetail"
          title="查看详情"
        >
          <el-icon><ZoomIn /></el-icon>
        </el-button>
        
        <el-button 
          type="success" 
          size="small" 
          circle
          @click.stop="toggleFavorite"
          :title="photo.rating > 0 ? '取消收藏' : '收藏'"
        >
          <el-icon>
            <StarFilled v-if="photo.rating > 0" />
            <Star v-else />
          </el-icon>
        </el-button>
      </div>
      
      <!-- 照片信息 -->
      <div class="photo-info">
        <div class="photo-name" :title="photo.file_name">{{ photo.file_name }}</div>
        <div class="photo-meta">
          <span v-if="photo.captured_at" class="photo-date">
            {{ formatDate(photo.captured_at) }}
          </span>
          <span v-if="photo.camera_model" class="photo-camera">
            {{ photo.camera_model }}
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import { useRouter } from 'vue-router';
import { ElButton, ElIcon, ElCheckbox } from 'element-plus';
import { ZoomIn, Star, StarFilled } from '@element-plus/icons-vue';
import type { Photo } from '../../types/photo';

// 导入全局类型
import '../../types/global'

interface Props {
  photo: Photo;
  selectable?: boolean;
  selected?: boolean;
  size?: 'small' | 'medium' | 'large';
}

interface Emits {
  (e: 'click', photo: Photo): void;
  (e: 'contextmenu', photo: Photo, event: MouseEvent): void;
  (e: 'select', photo: Photo, selected: boolean): void;
  (e: 'favorite', photo: Photo): void;
}

const props = withDefaults(defineProps<Props>(), {
  selectable: false,
  selected: false,
  size: 'medium'
});

const emit = defineEmits<Emits>();

const router = useRouter();
const imageError = ref(false);

// 计算缩略图样式
const thumbnailStyle = computed(() => {
  const sizes = {
    small: { width: '150px', height: '150px' },
    medium: { width: '200px', height: '200px' },
    large: { width: '300px', height: '300px' }
  };
  
  return sizes[props.size];
});

// 计算缩略图URL
const thumbnailUrl = computed(() => {
  if (imageError.value || !props.photo.thumbnail_path) {
    return `file://${props.photo.file_path}`;
  }
  return `file://${props.photo.thumbnail_path}`;
});

/**
 * 格式化日期
 * @param dateString 日期字符串
 * @returns 格式化后的日期字符串
 */
const formatDate = (dateString: string) => {
  const date = new Date(dateString);
  return date.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit'
  });
};

/**
 * 处理点击事件
 */
const handleClick = () => {
  emit('click', props.photo);
};

/**
 * 处理右键菜单事件
 */
const handleContextMenu = (event: MouseEvent) => {
  emit('contextmenu', props.photo, event);
};

/**
 * 切换选择状态
 */
const toggleSelect = () => {
  emit('select', props.photo, !props.selected);
};

/**
 * 打开照片详情
 */
const openPhotoDetail = () => {
  router.push(`/photo/${props.photo.id}`);
};

/**
 * 切换收藏状态
 */
const toggleFavorite = () => {
  emit('favorite', props.photo);
};

/**
 * 处理图片加载错误
 */
const handleImageError = () => {
  imageError.value = true;
};
</script>

<style scoped lang="scss">
.photo-card {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  background-color: var(--el-fill-color-lighter);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
  
  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    
    .photo-actions {
      opacity: 1;
    }
  }
  
  &.photo-card-selected {
    box-shadow: 0 0 0 2px var(--el-color-primary);
  }
  
  .photo-thumbnail {
    position: relative;
    overflow: hidden;
    
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .photo-select {
      position: absolute;
      top: 8px;
      left: 8px;
      background-color: rgba(0, 0, 0, 0.5);
      border-radius: 4px;
      padding: 4px;
      opacity: 0;
      transition: opacity 0.2s ease;
    }
    
    .photo-actions {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      gap: 8px;
      opacity: 0;
      transition: opacity 0.2s ease;
    }
    
    .photo-info {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 8px;
      background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
      color: white;
      
      .photo-name {
        font-size: 14px;
        font-weight: 500;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      
      .photo-meta {
        display: flex;
        justify-content: space-between;
        font-size: 12px;
        opacity: 0.8;
        margin-top: 2px;
      }
    }
  }
  
  &:hover .photo-select {
    opacity: 1;
  }
}

// 响应式设计
@media (max-width: 768px) {
  .photo-card {
    .photo-info {
      .photo-meta {
        flex-direction: column;
        gap: 2px;
      }
    }
  }
}
</style>